<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数据分析统计</title>
    <link rel="stylesheet" href="styles/main.css">
    <style>
        body { font-family: '微软雅黑', Arial, sans-serif; background: #f7f7f7; }
        .container { max-width: 900px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #0001; padding: 32px; }
        h1 { text-align: center; margin-bottom: 32px; }
        .section { margin-bottom: 32px; }
        .label { font-weight: bold; margin-right: 8px; }
        .select { padding: 4px 8px; }
        .info-box { background: #f8f8f8; border-radius: 6px; padding: 16px; margin-top: 12px; }
        .stats-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
        .stats-table th, .stats-table td { border: 1px solid #eee; padding: 8px 12px; text-align: left; }
        .stats-table th { background: #f0f0f0; }
        .error { color: red; text-align: center; margin-top: 20px; }
        .success { color: green; text-align: center; margin-top: 20px; }
    </style>
</head>
<body>
<div class="container">
    <h1>数据分析统计</h1>
    <div class="section">
        <span class="label">当前用户ID：</span><span id="userIdDisplay"></span>
    </div>
    <div class="section">
        <span class="label">选择角色配置：</span>
        <select id="configSelect" class="select"></select>
        <span id="configInfo"></span>
    </div>
    <div class="section" id="agentInfoSection" style="display:none;">
        <div class="info-box" id="agentInfo"></div>
    </div>
    <div class="section" id="statsSection" style="display:none;">
        <div class="info-box" id="statsInfo"></div>
    </div>
    <div class="section" id="skillsSection" style="display:none;">
        <div class="info-box">
            <span class="label">选择技能：</span>
            <select id="skillSelect" class="select"></select>
            <form id="damageForm" style="display:inline-block; margin-left:20px;">
                <span class="label">目标类型:</span>
                <input type="text" id="targetType" value="普通敌人" style="width:80px;">
                <span class="label">目标等级:</span>
                <input type="number" id="targetLevel" value="1" style="width:60px;">
                <span class="label">目标防御:</span>
                <input type="number" id="targetDefense" value="0" style="width:60px;">
                <span class="label">目标抗性:</span>
                <input type="number" id="targetResistance" value="0" style="width:60px;">
                <span class="label">元素类型:</span>
                <input type="text" id="elementType" value="以太" style="width:60px;">
                <span class="label">暴击:</span>
                <select id="isCritical" class="select"><option value="">概率</option><option value="true">是</option><option value="false">否</option></select>
                <button type="submit">计算伤害</button>
            </form>
            <div id="damageResult" class="info-box" style="margin-top:10px;"></div>
        </div>
    </div>
    <div id="error" class="error"></div>
    <div id="success" class="success"></div>
</div>
<script src="js/statistics.js"></script>
</body>
</html> 